<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
  <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
    <ScaleScreen
            :width="1920"
            :height="1080"
            class="scale-wrap"
            :selfAdaption="$store.state.setting.isScale"
    >
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <!-- 头部 s -->
                <div class="d-flex jc-center title_wrap">
                    <div class="zuojuxing"></div>
                    <div class="youjuxing"></div>
                    <div class="guang"></div>

                    <div class="d-flex jc-center">
                        <div class="title">
                            <span class="title-text">大数据可视化平台</span>
                        </div>
                    </div>
                    <el-button  class="change-btn" @click="urlChange" plain>切换页面</el-button>
                    <div class="timers">
                        {{ dateYear }} {{ dateWeek }} {{ dateDay }}
                        <i
                                class="blq-icon-shezhi02"
                                style="margin-left: 10px"
                                @click="showSetting"
                        ></i>
                    </div>
                </div>
                <!-- 头部 e-->
                <!-- 内容  s-->
                <router-view></router-view>
                <!-- 内容 e -->
            </div>
        </div>
        <Setting ref="setting"/>
    </ScaleScreen>
  <!-- </div> -->
</template>

<script>
import {formatTime} from "../utils/index.js";
import Setting from "./setting.vue";
import ScaleScreen from "@/components/scale-screen/scale-screen.vue";

export default {
    components: {Setting, ScaleScreen},
    data() {
        return {
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    computed: {},
    created() {
    },
    mounted() {
        this.timeFn();
        this.cancelLoading();
    },
    beforeDestroy() {
        clearInterval(this.timing);
    },
    methods: {
        urlChange() {
            console.log('当前路由地址:', this.$route.path)
            if ( this.$route.path=='/index'){
                this.$router.push('/index1');
            }else {
                this.$router.push('/index');
            }
        },
        showSetting() {
            this.$refs.setting.init();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), "HH: mm: ss");
                this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
        cancelLoading() {
            let timer = setTimeout(() => {
                this.loading = false;
                clearTimeout(timer);
            }, 500);
        },
    },
};
</script>

<style lang="scss">
@import "./home.scss";
</style>
